/*
 * facecloud后台index页面
 * @Author: ljb
 * @Date: 2018-03-26 10:18:23
 * @Last Modified by: ljb
 * @Last Modified time: 2019-11-19 11:50:30
 */
<style lang="less" rel="stylesheet/less" type="text/less">
.nav-head {
  width: 100%;
  min-width: 1186px;
position: relative;
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
//   min-width: 1140px;
  .breadcrumb-area {
    padding: 10px;
    position: absolute;
    line-height: 1;
        top: 10px;
        bottom: 0;
        left: 0;
        right: 200px;
     .breadcrumb{
         font-size: 18px;
     }

  }

  .drop-down {
      font-size: 16px;

      margin: 20px 30px 0 0;
   float: right;
    &.lang {
      margin-top: 12px;
    }
  }
}
</style>
<template>
	<div class="nav-head">
		<div class="breadcrumb-area">
			<Breadcrumb
				class="breadcrumb"
			>
				<BreadcrumbItem
					to="/panx-home"
				>主页</BreadcrumbItem>
				<BreadcrumbItem
					v-for="item in breadList"
					:to="item.name">{{ item.name }}</BreadcrumbItem>

			</Breadcrumb>
		</div>
		<Dropdown
			class="drop-down"
			trigger="click"
			placement="bottom-end"
			@on-click="cancelLogin">
			<a
				href="javascript:void(0)"
				name="welcome">
				欢迎你,尊敬的{{ admin }}
				<Icon type="ios-arrow-down" />
			</a>

			<Dropdown-menu
				slot="list"
				style="min-width:170px;"
			>
				<Dropdown-item name="cancel">
					<a
						name="logout"
						href="javascript:void(0)">退出登录</a>
				</Dropdown-item>
			</Dropdown-menu>
		</Dropdown>
	</div>
</template>

<script type="text/babel">
export default {
	data() {
		return {
			admin: '',
		};
	},
	created() {
		this.admin = sessionStorage.getItem('name');
	},
	computed: {
		// 响应式获取vuex的getters,若刷新之后vuex数据丢失,获取的将是备份到的sessionStorage
		breadList() {
			return this.$store.getters.breadcrumbList;
		},
	},
	watch: {
		// 监听回到panx-home路由时 把除home外的面包屑都清除掉
		  $route(to) {
			if (to.path == '/panx-home' || to.path == '/panx-home/') {
				this.$store.commit('deleteList');
				sessionStorage.removeItem('breadcrumbList');
			 }
		},
	},
	methods: {
		// 退出登录 回退到login页面并clear掉所有sessionStorage
		cancelLogin() {
			sessionStorage.clear('breadcrumbList');
			 this.$router.push({
				name: 'admin-login',
			});
		},

	},
};
</script>
